<template>
  <div class="wraps">
    <!-- 左上  -->
    <div class="upperleft">
      <div class="image-text-container">
        <img :src="leftImageUrl" alt="Left Image" class="image-left"/>
        <div class="text-container">
          <div class="p">名称：{{ name }}</div>
          <div class="p">文件号：{{ fileNumber }}</div>
          <div class="p">批次：{{ batch }}</div>
          <div class="p">日期：{{ date }}</div>
        </div>

      </div>
    </div>

    <!-- 右上  -->
    <div class="upperRight">
      <RightImg/>
    </div>

    <!-- 下 学术及交流活动 -->
    <div class="lowerLeft">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>学术及交流活动</span>
        </div>
        <XsjJlhd/>
      </el-card>
    </div>
  </div>
</template>

<script>
import LeftImg from "@/views/ysz/yszkb/LeftImg"
import RightImg from "@/views/ysz/yszkb/RightImg"
import XsjJlhd from "@/views/ysz/yszkb/XsjJlhd"

export default {
  name: 'Zscqkb',
  components: {LeftImg, RightImg, XsjJlhd},
  data() {
    return {
      leftImageUrl: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.zded-V8mEWmqegl9sYocmAHaE0?rs=1&pid=ImgDetMain',
      name: '四川省院士工作站',
      fileNumber: '川组通[2020]31号',
      batch: '四川省第九批院士工作站',
      date: '2020年11月17日'
    }
  },
  created() {
  }
}
</script>

<style scoped>
.wraps {
  position: relative;
  background-size: cover;
  width: 100%;
  height: calc(100vh - 134px);
  border: 2px dashed #aaa;
  overflow: hidden; /* 防止 leftpart 超出 wrap */
}

/* 左上 */
.upperleft {
  position: absolute;
  top: 1%; /* 距离顶部 1% */
  left: 1%; /* 距离左侧 1% */
  width: 48%; /* 占据页面宽度的 48% */
  height: 45%; /* 占据页面高度的 40% */
  border: 1px solid #D9EDF7;
  background-color: #5b9bd5;
}

.image-text-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 2%;
}

.image-left {
  width: 40%; /* 图片宽度 */
  height: auto;
}

.text-container {
  width: 60%; /* 文本容器宽度 */
  height: auto;
  padding: 2%;
  background-color: white;
  margin-left: 2%;
  border: 1px solid #ddd;
}

.p {
  font-weight: 900;
  margin: 1% 0;
  font-size: 17px;
  line-height: 3;
}

/* 右上 */
.upperRight {
  position: absolute;
  top: 1%; /* 距离顶部 1% */
  right: 1%; /* 距离右侧 1% */
  width: 48%; /* 占据页面宽度的 48% */
  height: 45%; /* 占据页面高度的 40% */
  border: 1px solid #D9EDF7;
  background-color: #5b9bd5;
}

/* 下 */
.lowerLeft {
  position: absolute;
  top: 47%; /* 距离顶部 42% */
  left: 1%; /* 距离左侧 1% */
  width: 98%; /* 占据页面宽度的 98% */
  height: auto; /* 占据页面高度的 55% */
  border: 1px solid #D9EDF7;
}

</style>
